import { InjectionKey } from "vue";
import { createStore, Store, useStore as baseUseStore } from "vuex";

import modules from "./modules";

export interface TodoItem {
  id: number;
  name: string;
  isDone: boolean;
}

export interface Todo {
  todoList: TodoItem[];
}

// 定义vuex管理的所有state数据的类型
export interface State {
  todo: Todo;
}

export const key: InjectionKey<Store<State>> = Symbol();

// 定义简化使用useStore的方法
export function useStore() {
  return baseUseStore(key);
}

export default createStore({
  modules,
  getters: {
    // 已完成数量
    isDoneNum(state: State) {
      return state.todo.todoList.reduce((p, c) => p + (c.isDone ? 1 : 0), 0);
    },
    // 总数
    total(state: State) {
      return state.todo.todoList.length;
    },
  },
});
